<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <script type="text/javascript" src="iscroll.js"></script> -->
	<!-- 功能弱性能高 -->
	<script type="text/javascript" src="iscroll-probe.js"></script>
	<style type="text/css">
		.wrap{
	width: 300px;height: 300px;background: #ccc;overflow: hidden;margin: 50px;position: relative;
		}
		.content{
	width: 800px;height: 2000px;background: -webkit-linear-gradient(left top,red,green);position:relative;z-index: 2;
		}
		.dropbar{
			position: absolute;top: 0;left: 0;
			z-index: 1;text-align: center;width: 100%;line-height:30px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="content">
			打开的
		</div>
		<div class="dropbar">
			下拉刷新
		</div>
	</div>
	<script type="text/javascript">
		window.onload=function(){
			let isc=new IScroll('.wrap',{probeType:2});
			let dropb=document.querySelector('.dropbar');
			console.log(isc.options)

			let scrolly=0;//记录滚动的值

			isc.on('scrollStart',function(){
					scrolly=0//每次开始时，初始化isc.y的值
			})
			isc.on('scroll',function(){
				console.log(isc.x,isc.y)
				if(isc.y>100){
					dropb.innerHTML='松手刷新'

				}else{
					dropb.innerHTML='下拉刷新'
				}
				scrolly=isc.y;
			})
			isc.on('scrollEnd',function(){
				// console.log(scrolly)
				if(scrolly>100){
					alert('正在刷新')
					// $.ajax(从服务器重新获取数据)
				}
			})
		
		}
	</script>
</body>
</html>